<template>
   <div class="page-box">
      <div class="page-title">
         <div>账户管理</div>
         <div>
            <el-button
               @click=""
               color="#6860FF"
            >
               新增账户
            </el-button>
         </div>
      </div>
      <div class="page-search">
         <div
            class="search-box"
            style="height: 40px"
         >
            <el-input
               v-model="search"
               placeholder="供账户名称/账户编号/账户类型"
               style="width: 270px; margin-right: 10px"
               suffix-icon="search"
            />
         </div>
         <div class="search-btn">
            <div
               class="btn_item"
               @click=""
            >
               <img
                  class="btn_img"
                  src="@/assets/dc.png"
                  alt=""
               />
               <span> 导出 </span>
            </div>
         </div>
      </div>
   </div>

   <div class="table-box">
      <el-table
         :data="tabeData"
         style="width: 100%"
         v-loading="loading"
         border
      >
         <el-table-column
            align="center"
            prop="rowNumber"
            label="账户名称"
            width="120"
         />
         <el-table-column
            align="center"
            prop="house_type_name"
            label="账户编号"
            width="120"
         />
         <el-table-column
            align="center"
            prop="title"
            label="账户类型"
            width="120"
         />
         <el-table-column
            align="center"
            prop="category_name"
            label="起初余额(元)"
            width="120"
         />

         <el-table-column
            align="center"
            prop="carport_district_count"
            label="目前账户余额(元)"
            width="160"
         />

         <el-table-column
            align="center"
            prop="zip"
            label="状态"
            width="160"
         />
         <el-table-column
            align="center"
            prop="remark"
            label="备注"
            width="120"
         />
         <el-table-column
            align="center"
            prop="carport_parking_count"
            label="创建人"
            width="120"
         />
         <el-table-column
            align="center"
            prop="create_time"
            label="创建时间"
            width="160"
         />

         <el-table-column
            align="center"
            prop="zip"
            label="操作"
            width="auto"
         >
            <template #default="scope">
               <el-button
                  size="small"
                  @click=""
                  >编辑</el-button
               >
               <el-button
                  size="small"
                  @click=""
                  >删除</el-button
               >
               <el-button
                  size="small"
                  @click=""
                  >启用</el-button
               >
               <el-button
                  size="small"
                  @click=""
                  >停用</el-button
               >
            </template>
         </el-table-column>
      </el-table>
   </div>
   <div class="amount-statistics">
      <div class="amount-statistics-item">
         <p>目前账户金额合计:</p>
      </div>
      <div style="width: 30px"></div>
      <div class="amount-statistics-item">
         <p class="deepPurple">1000</p>
         <div style="width: 10px"></div>
         <p>(大写:壹仟元整)</p>
      </div>
   </div>
   <!-- 分页 -->
   <Pagination
      class="pagination"
      @pageSize="pageSize"
      @getPage="getPage"
      :page="pageData.page"
      :page-size="pageData.pageSize"
      :total="total"
   />
</template>

<script setup lang="ts">
   import { ref, onMounted, watch } from "vue";
   import api from "@/api";

   let IsHeight = ref<number | string>(0);

   const search = ref<string>("");
   const dialogRef = ref<any>(null);
   const dateRange = ref<string[]>([]);
   const pageData = ref({
      pageSize: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const total = ref(0);
   const tabeData = ref([
      {
         rowNumber: "账户一",
         house_type_name: "10001",
         title: "支付宝",
         category_name: "1000.00",
         carport_district_count: "4000.00",
         zip: "启用中",
         remark: "-",
         carport_parking_count: "傅起涛",
         create_time: "2022-09-02 11:16"
      },
      {
         rowNumber: "账户二",
         house_type_name: "10002",
         title: "微信",
         category_name: "1000.00",
         carport_district_count: "4000.00",
         zip: "启用中",
         remark: "-",
         carport_parking_count: "王五",
         create_time: "2022-08-19 05:52"
      },
      {
         rowNumber: "账户三",
         house_type_name: "10003",
         title: "农业银行",
         category_name: "1000.00",
         carport_district_count: "4000.00",
         zip: "启用中",
         remark: "-",
         carport_parking_count: "王乐康",
         create_time: "2023-11-25 14:26"
      },
      {
         rowNumber: "账户四",
         house_type_name: "10004",
         title: "工商银行",
         category_name: "1000.00",
         carport_district_count: "4000.00",
         zip: "启用中",
         remark: "-",
         carport_parking_count: "张三",
         create_time: "2022-09-01 07:53"
      },
      {
         rowNumber: "账户五",
         house_type_name: "10005",
         title: "现金",
         category_name: "1000.00",
         carport_district_count: "4000.00",
         zip: "已停用",
         remark: "-",
         carport_parking_count: "王浩",
         create_time: "2023-07-28 09:40"
      }
   ]);
   // 侦听动态分页
   watch(
      () => {
         return pageData.value;
      },
      () => {
         // getAlltabeData();
      },
      { deep: true }
   );
   const pageSize = (e: number) => {
      pageData.value.pageSize = e;
   };
   const getPage = (e: number) => {
      pageData.value.page = e;
   };


   const loading = ref(false);
</script>

<style lang="scss" scoped>
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .page-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
   }
   // 输入框样式
   ::v-deep .el-input__wrapper {
      background-color: rgba(250, 252, 251, 1);
   }

   //表格样式

   ::v-deep .el-table {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
   }

   ::v-deep .el-table thead {
      color: #444;
   }

   //分页样式
   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   ::v-deep .el-pagination.is-background .el-pager li.is-active {
      background-color: #000 !important;
   }
   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__inner:hover) {
      border-color: #626aef !important;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      border-color: #6860ff;
   }
   :deep(.el-button:hover) {
      background-color: #e2e4fd;
      color: #6860ff;
   }
   :deep(.el-input__wrapper:hover) {
      box-shadow: inset 0 0 0 1px #6860ff;
   }
   :deep(.el-button:hover) {
      background-color: #e2e4fd;
      color: #6860ff;
   }
   .deepPurple {
      color: #7a60fe;
      margin-left: 10px;
   }
   .amount-statistics {
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 10px 20px;
      background-color: #f2f2f2;
      margin-top: 20px;
      border-radius: 5px;
      .amount-statistics-item {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: auto;
      }
   }
</style>
